<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓颉单字练习</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        @font-face {
            font-family: 'PlanMi';
            src: url('PlanMi.ttf') format('truetype');
        }
		@font-face {
			font-family: 'Extra';
			src: url('extra.ttf') format('truetype');
}
        #characterDisplay {
            font-family: 'Sans Serif', 'PlanMi', 'Extra';
            font-size: 190px;
            text-align: center;
            width: 200px;
            height: 200px;
        }
		
		p {
		text-align: center; 
		}
	
    </style>
    <link rel="preload" href="PlanMi.ttf" as="font" type="font/ttf" crossorigin="anonymous">
	<link rel="preload" href="extra.ttf" as="font" type="font/ttf" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="input-group input-group-md">
                    <input type="text" id="characterDisplay" name="characterDisplay" readonly>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="checkbox">
                    <label>
                         <input type="checkbox" id="toggleMapping" onchange="toggleMapping()" checked> 编码提示:&nbsp;<span id="mappingKey"></span>
                    </label>
                </div>
                <div class="form-group">
                      <input type="checkbox" id="showKeyCheckbox" onchange="showKeyCheckbox()"> 显示键名:&nbsp;<span id="showKey"></span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group input-group-md">
                    <span class="input-group-addon">练习内容:</span>
                    <select class="form-control" id="practiceClass">
                        <option value="CJK">基本区</option>
                        <option value="EXT-A">扩展A区</option>
                        <option value="EXT-B">扩展B区</option>
                        <option value="EXT-C">扩展C区</option>
                        <option value="EXT-D">扩展D区</option>
                        <option value="EXT-E">扩展E区</option>
                        <option value="EXT-F">扩展F区</option>
                        <option value="EXT-G">扩展G区</option>
						<option value="EXT-H">扩展H区</option>
						<option value="EXT-I">扩展I区</option>
                    </select>
                </div>
                <div class="input-group input-group-md">
                    <span class="input-group-addon">字符数量:</span>
                    <input type="number" class="form-control" id="practiceCount" value="20" min="1">
                </div>
            </div>
        </div>
        <br>
<div class="row">
            <div class="col-md-2">
                <div class="input-group input-group-md">
                    <span class="input-group-addon">进度:</span>
                    <input type="text" class="form-control" readonly="readonly" id="progress">
                </div>
            </div>
            
            <div class="col-md-1">
                <div class="form-group">
                    <input type="button" id="nextButton" value="下一个" class="btn btn-primary btn-md">
                </div>
            </div>
        <div class="col-md-3">
                <div class="input-group input-group-md">
                    <span class="input-group-addon">练习区:</span>
                    <input type="text" class="form-control" id="lianxi" placeholder="请在英文模式下练习" style="color: gray;">
                </div>
            </div></div>
    </div>
	<script src="cangjie.js"></script>
    
	<script>
	const lianxiInput = document.getElementById('lianxi');
const mappingKeySpan = document.getElementById('mappingKey');

lianxiInput.addEventListener('input', function() {
  const lianxiValue = lianxiInput.value.replace(/\s/g, '').toUpperCase();
  const mappingKey = mappingKeySpan.innerText.toUpperCase();

  if (lianxiValue === mappingKey) {
    correctCount++;
    chooseNextCharacter();
    updateProgress();
    lianxiInput.value = ''; // 清空文本框
  }
});
        const CjName = ["日", "月", "金", "木", "水", "火", "土", "竹", "戈", "十", "大", "中", "一", "弓", "人", "心", "手", "口", "尸", "廿", "山", "女", "田", "難", "卜"];

        let currentCharacter = "";
        let correctCount = 0;
        let totalCount = 0;
        let availableCharacters = [];

        function setCharacter(option) {
            let list;
            switch(option) {
                case "CJK":
                    list = CJK;
                    break;
                case "EXT-A":
                    list = EXT_A;
                    break;
				case "EXT-B":
                    list = EXT_B;
                    break;
				case "EXT-C":
                    list = EXT_C;
                    break;
				case "EXT-D":
                    list = EXT_D;
                    break;
				case "EXT-E":
                    list = EXT_E;
                    break;
				case "EXT-F":
                    list = EXT_F;
                    break;
				case "EXT-G":
                    list = EXT_G;
                    break;
				case "EXT-H":
                    list = EXT_H;
                    break;
				case "EXT-I":
                    list = EXT_I;
                    break;

                default:
                    list = CJK; // 默认为基本区
                    break;
            }

            availableCharacters = Object.keys(list);
            chooseNextCharacter();
            updatePracticeCount();
        }

		function getCharacterFromKey(key) {
		let character = '';
		for (let i = 0; i < key.length; i++) {
			const charCode = key[i].toUpperCase().charCodeAt(0) - 65;
			const cjNameIndex = charCode % CjName.length;
			const cjNameCount = Math.floor(charCode / CjName.length) + 1;
		
			for (let j = 0; j < cjNameCount; j++) {
			character += CjName[cjNameIndex];
			}
		}
		return character;
		}
		
		
        function updateCharacterDisplay() {
            const practiceClass = document.getElementById("practiceClass").value;
const mappingKey = (() => {
  switch (practiceClass) {
    case "CJK":
      return CJK[currentCharacter];
    case "EXT-A":
      return EXT_A[currentCharacter];
    case "EXT-B":
      return EXT_B[currentCharacter];
    case "EXT-C":
      return EXT_C[currentCharacter];
    case "EXT-D":
      return EXT_D[currentCharacter];
    case "EXT-E":
      return EXT_E[currentCharacter];
    case "EXT-F":
      return EXT_F[currentCharacter];
    case "EXT-G":
      return EXT_G[currentCharacter];
    case "EXT-H":
      return EXT_H[currentCharacter];
    case "EXT-I":
      return EXT_I[currentCharacter];
    default:
      return "";
  }
})();
            const showKey = (practiceClass !== "Keyname") ? getCharacterFromKey(mappingKey) : currentCharacter;

            characterDisplay.value = currentCharacter;
            document.getElementById("mappingKey").innerText = mappingKey;
            document.getElementById("showKey").innerText = (typeof showKey === "number") ? CjName[showKey] : showKey;
        }

        function chooseNextCharacter() {
            if (availableCharacters.length > 0) {
                const randomIndex = Math.floor(Math.random() * availableCharacters.length);
                currentCharacter = availableCharacters[randomIndex];
                updateCharacterDisplay();
                updateProgress();

                if (correctCount === parseInt(document.getElementById("practiceCount").value, 10)) {
                    location.reload();
                }
            }
        }

        function updateProgress() {
            const practiceCountElement = document.getElementById('practiceCount');
            totalCount = parseInt(practiceCountElement.value, 10);
            document.getElementById("progress").value = correctCount + "/" + totalCount ;
        }

        document.getElementById("toggleMapping").addEventListener("change", function() {
            toggleMapping();
        });

        document.getElementById("practiceClass").addEventListener("change", function() {
            correctCount = 0;
            setCharacter(this.value);
        });
        
        document.getElementById("practiceCount").addEventListener("change", function() {
            correctCount = 0;
            setCharacter(this.value);
        });

        document.getElementById("nextButton").addEventListener("click", function() {
            correctCount++;
            chooseNextCharacter();
            updateProgress();
        });


        setCharacter("CJK");

        function toggleMapping() {
            var span = document.getElementById("mappingKey");
            var checkbox = document.getElementById("toggleMapping");
            if (checkbox.checked) {
                span.style.display = "inline";
            } else {
                span.style.display = "none";
            }
        }

        window.onload = function() {
            // 在页面加载时调用函数，检查复选框的状态并更新 span 元素的显示
            updateShowKeyCheckbox();
        };

        function updateShowKeyCheckbox() {
            var span = document.getElementById("showKey");
            var checkbox = document.getElementById("showKeyCheckbox");
            if (!checkbox.checked) {
                span.style.display = "none";
            } else {
                span.style.display = "inline";
            }
        }

        function showKeyCheckbox() {
            var span = document.getElementById("showKey");
            var checkbox = document.getElementById("showKeyCheckbox");
            if (checkbox.checked) {
                span.style.display = "inline";
            } else {
                span.style.display = "none";
            }
        }

        function updatePracticeCount() {
            const practiceCountElement = document.getElementById('practiceCount');
            const selectedClass = document.getElementById("practiceClass").value;
            let count = parseInt(practiceCountElement.value, 10);
            
            switch(selectedClass) {
                case "CJK":
                    count = Math.min(count, Object.keys(CJK).length);
                    break;
                case "EXT-A":
                    count = Math.min(count, Object.keys(EXT_A).length);
                    break;
				case "EXT-B":
                    count = Math.min(count, Object.keys(EXT_B).length);
                    break;
				case "EXT-C":
                    count = Math.min(count, Object.keys(EXT_C).length);
                    break;
				case "EXT-D":
                    count = Math.min(count, Object.keys(EXT_D).length);
                    break;
				case "EXT-E":
                    count = Math.min(count, Object.keys(EXT_E).length);
                    break;
				case "EXT-F":
                    count = Math.min(count, Object.keys(EXT_F).length);
                    break;
				case "EXT-G":
                    count = Math.min(count, Object.keys(EXT_G).length);
                    break;
				case "EXT-H":
                    count = Math.min(count, Object.keys(EXT_H).length);
                    break;
				case "EXT-I":
                    count = Math.min(count, Object.keys(EXT_I).length);
                    break;

                default:
                    count = Math.min(count, Object.keys(CJK).length); // 默认为基本区
                    break;
            }

            practiceCountElement.value = count;
        }
		


let inputString = '';


    </script>
</body>
</html>